'use client';
import { Button } from '@/components/ui/Button';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import type { ReactNode } from 'react';
import { use } from 'react';

export default function SettingLayout({
  params,
  children,
}: {
  params: Promise<{ id: string }>;
  children: ReactNode;
}) {
  const { id } = use(params);
  const pathname = usePathname();

  const menuItems = [
    {
      label: 'Storage',
      path: `/dashboard/apps/${id}/setting/storage`,
      isActive: pathname === `/dashboard/apps/${id}/setting/storage`,
    },
    {
      label: 'Api Key',
      path: `/dashboard/apps/${id}/setting/api-key`,
      isActive: pathname === `/dashboard/apps/${id}/setting/api-key`,
    },
  ];
  return (
    <div className="flex justify-start container mx-auto gap-2">
      <div className="flex flex-col w-60 flex-shrink-0 pt-10 gap-4">
        {menuItems.map((item) => (
          <Button
            size="lg"
            key={item.path}
            asChild={!item.isActive}
            variant={item.isActive ? 'outline' : 'ghost'}
            disabled={item.isActive}
          >
            {item.isActive ? (
              item.label
            ) : (
              <Link href={item.path}>{item.label}</Link>
            )}
          </Button>
        ))}
      </div>
      <div className="flex-grow pl-4">{children}</div>
    </div>
  );
}
